<template>
	<view class="u-p-20">
		<view class="u-p-30">
			<u-form :model="form" ref="uForm" label-width='140'>
				<u-form-item :label="change?'新手机号':'旧手机号'" prop="mobile">
					<u-input v-model="form.mobile" type='number' placeholder="请填写手机号码" />
				</u-form-item>
				<u-form-item label="验证码" prop="code">
					<u-input v-model="form.code" placeholder="请填写验证码" />
					<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
				</u-form-item>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</u-form>
		</view>
		<u-button class='u-m-t-30' type="warning" @click="submit">{{change?'确定':'验证'}}</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		sendMobileSms,
		userUpdate
	} from '@/api/shop.js'
	import {
		getByMobile
	} from '@/api/index.js'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.form = {
				...this.form,
				mobile: this.userInfo.mobile
			}
		},
		data() {
			return {
				change: false,
				codeText: '',
				codeNum: '',
				form: {
					mobile: '',
					code: '',
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					code: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			getUserInfo() {
				getByMobile({
					mobile: this.form.mobile
				}).then(res => {
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
						back: true
					})
					this.$store.commit('setUserInfo', res)
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$u.test.mobile(this.form.mobile)) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						sendMobileSms({
							mobile: this.form.mobile
						}).then(res => {
							this.codeNum = res
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			} else {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
			}
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (this.codeNum != this.form.code) {
						this.$u.toast('验证码输入错误')
					} else {
						if (this.change) {
							userUpdate({
								JSESSIONID: uni.getStorageSync('sessionid'),
								id: this.userInfo.id,
								mobile: this.form.mobile,
							}).then(res => {
								this.getUserInfo()
							})
						} else {
							this.change = true
							this.$refs.uCode.reset()
							this.form = {
								mobile: '',
								code: ''
							}
						}
					}
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
	};
</script>
